<template>
    <view class="course" v-show="isEmpty">
        <!-- Header Start -->
        <!-- 轮播图 -->
        <view id="swiper">
            <ad-swiper
                v-if="catalog.id == 0"
                :list="JSON.stringify(courseData.images)"
                height="400"
                mode="none"
                name="uri"
                indicatorPos="bottomRight"
            ></ad-swiper>
            <LVideo
                v-if="catalog.id != 0"
                :src="catalog.content"
                :cata-id="catalog.id"
                :initial-time="catalog.studyDuration / 1000"
                :course-id="catalog.courseId"
            ></LVideo>
        </view>
        <!-- Header Start -->

        <!-- Main Start -->
        <!-- 课程信息 -->
        <view class="course-info bg-white">
            <!-- 价格信息 && 学习信息 -->
            <view class="flex justify-between">
                <!-- 价格 -->
                <view>
                    <template v-if="courseData.feeType === 1">
                        <!-- 销售价 -->
                        <price
                            :content="courseData.sellPrice"
                            mainSize="36rpx"
                            minorSize="34rpx"
                            fontWeight="500"
                        >
                        </price>
                        <!-- 划线价 -->
                        <price
                            v-if="courseData.linePrice"
                            :content="courseData.linePrice"
                            mainSize="26rpx"
                            minorSize="26rpx"
                            class="m-l-20"
                            color="#888888"
                            lineThrough
                        ></price>
                    </template>
                    <text v-else class="text-2xl font-medium" style="color: #fa8919">免费</text>
                </view>
                <!-- 学习信息 -->
                <view class="font-xs">
                    <text class="ml-[15rpx] text-muted"
                        >{{ courseData.studyNum + courseData.virtualStudyNum || 0 }}人已学习｜共{{
                            courseData.courseCatalogues.length
                        }}讲</text
                    >
                </view>
            </view>
            <view class="flex col-start mt-[20rpx]">
                <!-- 课程名称 -->
                <view class="text_hidden align-middle">
                    <text
                        class="tags"
                        :class="{
                            'bg-[#E1F6F3] text-[#19D1B6]': courseData.type == 1,
                            'bg-[#EBEAFF] text-[#2171FF]': courseData.type == 2,
                            'bg-[#E4EEFF] text-[#817AFF]': courseData.type == 3
                        }"
                        >{{ getCourseType(courseData.type) }}</text
                    >
                    <text class="text-xl font-medium flex-1 break-all ml-[10rpx]">{{
                        courseData.name
                    }}</text>
                </view>

                <!-- 分享 -->
                <!-- #ifdef MP-WEIXIN-->
                <!-- <button class="btn flex px-0" open-type="share">
                    <view class="share flex flex-col items-center">
                        <image src="/static/images/icon_share.png"></image>
                        <view class="text-xs lighter flex">分享</view>
                    </view>
                </button> -->
                <!-- #endif -->
                <!-- #ifdef H5 -->
                <!-- <button class="btn flex" @click="showSharePop">
                    <view class="share flex flex-col items-center">
                        <image src="/static/images/icon_share.png"></image>
                        <view class="text-xs lighter flex">分享</view>
                    </view>
                </button> -->
                <!-- #endif -->
                <!--分享-->
            </view>
            <!-- 介绍 -->
            <view class="text-muted mt-[18rpx] font-sm break-words">
                {{ courseData.synopsis }}
            </view>
            <!-- <view class="mt-[18rpx]">
                <moreText
                    :content="courseData.synopsis"
                    :line-height="26"
                    :line-hide="2"
                    font-size="26rpx"
                    btnColor="#fa8919"
                ></moreText>
            </view> -->
        </view>
        <!--优惠券 -->
        <view
            class="coupon p-[30rpx] bg-white mt-[24rpx] flex items-center"
            @click="couponPop = true"
            v-if="couponList.length > 0"
        >
            <view class="text-base">优惠</view>
            <view
                class="px-[10rpx] py-[3rpx] text-primary rounded-md ml-[40rpx]"
                style="border: 1px solid #2073f4"
                >领券</view
            >

            <view
                class="tick px-[24rpx] py-[3rpx] flex-none p-[10rpx] text-white bg-primary ml-[20rpx] rounded-sm"
            >
                <view v-if="couponList[0]?.type == 3">无门槛</view>
                <view v-else>{{ `满${couponList[0]?.fullAmount}减${couponList[0]?.amount}` }}</view>
            </view>
            <view
                class="tick px-[24rpx] py-[3rpx] flex-none p-[10rpx] text-white bg-primary ml-[20rpx] rounded-sm"
                v-if="couponList.length > 1"
            >
                <view v-if="couponList[1]?.type == 3">无门槛</view>
                <view v-else>{{ `满${couponList[1]?.fullAmount}减${couponList[1]?.amount}` }}</view>
            </view>
            <view class="flex-1 flex justify-end">
                <u-icon name="arrow-right" color="##FFFFFF" size="28"></u-icon>
            </view>
        </view>

        <!-- 课程介绍 ｜｜ 课程目录 ｜｜ 课程评价 -->
        <view class="course_detail">
            <tabs
                :current="active"
                fontSize="32"
                :top="0"
                isFixed
                height="100"
                bar-width="60"
                inactiveColor="#888888"
                :barStyle="{ bottom: '-5rpx' }"
                barHeight="6"
                :bottomLine="true"
            >
                <tab name="课程介绍" :i="0" :index="active">
                    <!-- 课件下载 -->
                    <view
                        class="px-[30rpx] mt-[24rpx] bg-white"
                        @click="handleMeterialIsOpen"
                        v-if="courseData.meterial"
                    >
                        <view class="normal text-xl font-medium text-[32rpx]">教学服务</view>
                        <view class="course-materials--info flex row-between rounded-lg mt-[20rpx]">
                            <!-- 课件信息 -->
                            <view class="flex">
                                <image src="/static/images/icon_course-materials.png"></image>
                                <view class="course-materials--info--name line-1 ml-[10px]">{{
                                    courseData.meterial?.fileName
                                }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 讲师信息 -->
                    <view class="px-[30rpx] mt-[30rpx]">
                        <view class="normal text-xl font-medium text-[32rpx]">讲师介绍</view>
                        <view
                            class="teacher-info bg-[#F3F5F9] flex rounded-lg"
                            v-if="courseData.teacher"
                            @click="
                                goPage(
                                    `/bundle/pages/teacher_detail/index?id=${courseData.teacher.id}`
                                )
                            "
                        >
                            <u-image
								class="flex-none"
                                :src="courseData.teacher.avatar"
                                width="100"
                                height="100"
                                borderRadius="50%"
                            ></u-image>
                            <view class="ml-[20rpx]">
                                <view class="normal text-xl font-medium mb-[8rpx]">{{
                                    courseData.teacher.name
                                }}</view>
                                <view class="teacher-info--synopsis line-2 muted font-sm">
                                    {{ courseData.teacher.synopsis }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="flex items-center mt-[30rpx] px-[30rpx]">
                        <view class="h-[1px] bg-[#e2e2e2] flex-1"></view>
                        <view class="flex-none mx-[20rpx] text-[28rpx]">课程详情</view>
                        <view class="h-[1px] bg-[#e2e2e2] flex-1"></view>
                    </view>
                    <course-synopsis :content="courseData.content"></course-synopsis>
                </tab>
                <tab
                    name="课程目录"
                    :i="1"
                    :index="active"
                    v-if="courseData.courseCatalogues.length"
                >
                    <course-catalogue
                        :list="courseData.courseCatalogues"
                        :status="courseData.purchased"
                        :type="courseData.type"
                        :cate-id="catalog.id"
                        @refresh="handleCateRefresh"
                    ></course-catalogue>
                </tab>
                <tab name="学员评价" :i="2" :index="active" v-if="commentList.length">
                    <evaluate-card :list="commentList"></evaluate-card>
                </tab>
            </tabs>
        </view>
        <!-- Main End -->

        <!-- Footer Start -->
        <view class="footer">
            <view class="flex text-center">
                <view class="footer--item text-center" @click="goHome">
                    <image src="/static/images/icon_home.png"></image>
                    <view>首页</view>
                </view>
                <view class="footer--item text-center" @click="handleCollection()">
                    <image
                        :src="
                            courseData.collected
                                ? '/static/images/icon_collection_s.png'
                                : '/static/images/icon_collection.png'
                        "
                    ></image>
                    <view>收藏</view>
                </view>
                <template
                    v-if="
                        courseData.purchased == false &&
                        courseData.feeType == 0 &&
                        courseData.allowPurchase == 1
                    "
                >
                    <u-button
                        @click="handleAddCourse"
                        class="ml-[20rpx] flex-1"
                        :ripple="true"
                        shape="circle"
                        :hair-line="false"
                        type="primary"
                        >加入课程</u-button
                    >
                </template>
                <template
                    v-if="
                        courseData.purchased == false &&
                        courseData.feeType == 1 &&
                        courseData.allowPurchase == 1
                    "
                >
                    <u-button
                        @click="handleOrder"
                        class="ml-[20rpx] flex-1"
                        :ripple="true"
                        shape="circle"
                        :hair-line="false"
                        type="primary"
                        >{{ courseData.btn_str }}</u-button
                    >
                </template>
                <template v-if="courseData.purchased == true">
                    <u-button
                        @click="goStudyCourse"
                        class="ml-[20rpx] flex-1"
                        :ripple="true"
                        shape="circle"
                        :hair-line="false"
                        type="primary"
                        >去学习</u-button
                    >
                </template>
                <template v-if="courseData.purchased == false && courseData.allowPurchase == 0">
                    <u-button
                        class="ml-[20rpx] flex-1"
                        :ripple="true"
                        shape="circle"
                        :hair-line="false"
                        type="gary"
                        disabled
                        >{{ courseData.btn_str || '由于相关规范IOS暂不支持购买' }}</u-button
                    >
                </template>
            </view>
        </view>
        <!-- Footer End -->
    </view>

    <!-- empty Start -->
    <view v-show="!isEmpty" class="empty">
        <u-empty
            text="抱歉，该课程不存在~"
            :src="'/static/images/empty/collection.png'"
            :icon-size="300"
            color="#888888"
        >
            <template #bottom>
                <view class="empty-bottom">
                    <u-button
                        @click="goHome"
                        shape="circle"
                        :ripple="true"
                        :hair-line="false"
                        type="primary"
                    >
                        去看看其它</u-button
                    >
                </view>
            </template>
        </u-empty>
    </view>
    <!-- empty End -->

    <!-- 课件下载弹窗 Start -->
    <u-popup v-model="isDownload" mode="center" closeable bgColor="none" close-icon-color="#FFFFFF">
        <view class="download-container" v-if="courseData.meterial">
            <view class="download-header">
                <!-- 标题 -->
                <view class="p-[30rpx] text-white text-lg font-normal">课件下载</view>
                <!-- 下载图标 -->
                <image src="/static/images/icon_download.png" class="mt-[60rpx]"></image>
            </view>
            <view class="download-main bg-white">
                <view class="download-main--link flex col-start pt-[40rpx]">
                    <text>链接：</text>
                    <view class="line-4">
                        {{ courseData.meterial.link }}
                    </view>
                </view>
                <view class="mt-[30rpx]">密码：{{ courseData.meterial.code }}</view>

                <view class="copy-btn">
                    <u-button @click="handleMeterial" :plain="true" shape="circle" type="primary"
                        >一键复制</u-button
                    >
                </view>
            </view>
        </view>
    </u-popup>
    <!-- 课件下载弹窗 End -->

    <!-- 加入课程弹窗 Start -->
    <u-popup v-model="addCourse" mode="center" borderRadius="14" :mask-close-able="false">
        <view class="course-pop text-center">
            <view class="text-2xl font-medium normal">添加成功</view>
            <view class="text-lg normal mt-[16rpx] pb-[20rpx]"> 可在【我的课程】进行查看 </view>
            <view class="m-t-60">
                <u-button
                    @click="addCourse = false"
                    :ripple="true"
                    shape="circle"
                    :hair-line="false"
                    type="primary"
                    >好的，我知道了</u-button
                >
            </view>
        </view>
    </u-popup>
    <!-- 加入课程弹窗 End -->

    <!-- 购买课程弹窗 Start -->
    <u-popup v-model="buyCourse" mode="center" borderRadius="14" :mask-close-able="false">
        <view class="course-pop text-center">
            <view
                v-if="courseData.feeType == 0"
                class="font-lg font-medium normal pt-[45px] pb-[40px]"
                >抱歉，您还未加入过该课程</view
            >
            <view
                v-if="courseData.feeType != 0"
                class="font-lg font-medium normal pt-[45px] pb-[40px]"
                >抱歉，您还未购买过该课程</view
            >
            <view class="flex justify-between mt-[60rpx]">
                <template
                    v-if="courseData.purchased == false && courseData.feeType == 1 && !platform"
                >
                    <u-button
                        @click="handleOrder"
                        class="ml-[20rpx] flex-1"
                        :ripple="true"
                        shape="circle"
                        :hair-line="false"
                        type="primary"
                        >购买课程</u-button
                    >
                </template>
                <template v-if="courseData.purchased == false && courseData.feeType == 0">
                    <u-button
                        @click="handleAddCourse"
                        class="ml-[20rpx] flex-1"
                        :ripple="true"
                        shape="circle"
                        :hair-line="false"
                        type="primary"
                        >加入课程</u-button
                    >
                </template>
                <u-button
                    @click="buyCourse = false"
                    class="flex-1 m-l-30"
                    :ripple="true"
                    shape="circle"
                    :hair-line="false"
                    type="gary"
                    >取消</u-button
                >
            </view>
        </view>
    </u-popup>
    <!-- 购买课程弹窗 End -->

    <!--优惠券弹框-->
    <u-popup
        v-model="couponPop"
        mode="bottom"
        height="850rpx"
        borderRadius="14"
        safe-area-inset-bottom
        closeable
    >
        <view class="px-[30rpx]">
            <view
                class="title py-[25rpx] h-[100rpx] text-center text-3xl sticky top-0 bg-white"
                style="border-bottom: 1px solid #f6f6f6"
                >优惠</view
            >
            <view v-for="(item, index) in couponList" :key="index" class="py-[15rpx]">
                <coupon-card :coupon-data="item" :type="3"></coupon-card>
            </view>
        </view>
    </u-popup>
    <!--优惠券弹框 End-->

    <!--H5分享遮盖层 Start-->
    <sharePop ref="sharePopRef"></sharePop>
    <!--H5分享遮盖层 End-->
    <!-- 骨架屏 -->
    <skeleton v-show="loading"></skeleton>
</template>

<script setup lang="ts">
import { ref, computed, shallowRef, reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import AdSwiper from '@/components/ad-swiper/index.vue'
import Price from '@/components/price/index.vue'
import CourseSynopsis from './components/synopsis.vue'
import CourseCatalogue from '@/components/catalogue/index.vue'
import EvaluateCard from './components/evaluate-card.vue'
import skeleton from './components/skeleton.vue'
import sharePop from '@/components/share-pop/index.vue'
import couponCard from '@/components/coupon-card/index.vue'
import LVideo from '../study_course/components/l-video.vue'
import { apiCourseDetail, apiCourseStudy, apiEvaluateGoodsLists, apiGetMeterial } from '@/api/goods'
import { apiCourseCollection } from '@/api/user'
import { courseCouponList } from '@/api/coupon'
import { apiPlaceOrder } from '@/api/order'
import { copy, objectSort, isWeixinClient, toast } from '@/utils/util'
import { useUserStore } from '@/stores/user'
import { getClient } from '@/utils/client'
import { PayEnum } from '@/utils/enum'
import { domain } from '@/config/app'
import moreText from '@/components/moreText/index.vue'

// /** Interface Start **/
interface courseDataObj {
    id: any //id
    name: string // 课程名称
    synopsis: string // 课程简介
    course_num: string // 单位描述
    images: string // 轮播图
    cover: string // 封面图
    sellPrice: string // 价格
    linePrice: string // 划线价
    content: string // 课程详情
    feeType: number // 是否免费
    purchased: boolean // 是否已购买
    collected: boolean // 是否已收藏
    studyNum: number // 学习人数
    courseCatalogues: Array<any> // 目录列表
    teacher: any // 讲师
    type: number // 课程类型
    meterial: any // 课程资料
    virtualStudyNum: any //虚拟学习人数
    allowPurchase?: number //课程是否允许购买
    btn_str?: string //购买按钮文本
}
interface Icatalog {
    content: string
    id: number
    courseId: number
    studyDuration: number
}

// /** Interface End **/

/** Data Start **/
const courseData = ref<courseDataObj>({
    id: '',
    name: '',
    synopsis: '',
    course_num: '',
    images: '',
    cover: '',
    sellPrice: '',
    linePrice: '',
    content: '',
    feeType: 0,
    purchased: false,
    studyNum: 0,
    collected: false,
    courseCatalogues: [],
    teacher: {},
    type: 0,
    meterial: {},
    virtualStudyNum: 0,
    allowPurchase: 0,
    btn_str: ''
})

const catalog = reactive<Icatalog>({
    content: '',
    id: 0,
    courseId: 0,
    studyDuration: 0
})

//H5分享弹框遮盖层ref
const sharePopRef = shallowRef()
// 是否已下架
const isEmpty = ref<boolean>(true)
// 课程ID
const courseId = ref<number | string>('')
// 课件下载弹窗
const isDownload = ref<boolean>(false)
// 加入课程成功弹窗
const addCourse = ref<boolean>(false)
// 购买课程弹窗
const buyCourse = ref<boolean>(false)
// 优惠券弹框
const couponPop = ref<boolean>(false)
//优惠券列表
const couponList = ref<any[]>([])

// 课程目录｜｜评价｜｜介绍索引
const active = ref(0)
// 加载状态
const loading = ref<boolean>(true)
//评论
const commentList = ref([])
/** Data End **/

/** Computed Start **/
//是否登陆
const userStore = useUserStore()
const isLogin = computed(() => userStore.token)
//当前设备是否为苹果设备
const platform = computed(() => uni.getSystemInfoSync().platform == 'ios' && getClient() == 1)
//获取课程类型
const getCourseType = computed(() => {
    return (type: any) => {
        switch (type) {
            case 1:
                return '图文'
            case 2:
                return '音频'
            case 3:
                return '视频'
        }
    }
})
/** Computed End **/

/** Methods Start **/
//获取课程详情
const initGoodaDetail = async (): Promise<void> => {
    try {
        courseData.value = await apiCourseDetail({ id: courseId.value })
        //课程目录排序
        courseData.value.courseCatalogues = objectSort(courseData.value.courseCatalogues, 'sort')
        setTimeout(() => {
            loading.value = false
        }, 100)
    } catch (err) {
        isEmpty.value = false
        loading.value = false
    }
}
//获取评价列表
const getEvaluate = async () => {
    const { lists } = await apiEvaluateGoodsLists({
        courseId: courseId.value
    })
    commentList.value = lists
}

//获取课程资料
const getMeterial = async () => {
    courseData.value.meterial = await apiGetMeterial({
        courseId: courseId.value
    })
}

//获取优惠券列表
const getCouponList = async () => {
    couponList.value = await courseCouponList({
        courseId: courseId.value
    })
}

//处理h5分享
const showSharePop = async () => {
    sharePopRef.value.openPop()
}

//处理课件下载是否打开
const handleMeterialIsOpen = () => {
    if (!isLogin.value) return goPage('/pages/login/login')

    // #ifdef MP-WEIXIN
    if (courseData.value.meterial.isLink == 0) {
        toast('该课件资料不支持在小程序内直接下载！')
        return
    }
    // #endif
    // #ifdef H5
    if (courseData.value.meterial.isLink == 0 && !isWeixinClient()) {
        const downloadTask = uni.downloadFile({
            url: domain + '/' + courseData.value.meterial.content,
            success: (res) => {
                //文件下载
                const oA = document.createElement('a')
                oA.download = ''
                oA.href = res.tempFilePath
                document.body.appendChild(oA)
                oA.click()
                oA.remove()
            }
        })
        return
    }
    // #endif
    if (courseData.value.purchased == true) {
        isDownload.value = true
    } else {
        buyCourse.value = true
    }
}

//处理课件资料复制
const handleMeterial = () => {
    copy(`链接：${courseData.value.meterial.link}\n密码：${courseData.value.meterial.code}`)
}

//处理点击目录
const handleCateRefresh = (cateItem: any) => {
    if (cateItem.feeType == 1 && courseData.value.purchased == false) {
        if (courseData.value.allowPurchase == 0) {
            uni.showModal({
                title: '提示',
                content: '本设备不支持购买',
                showCancel: false
            })
            return
        }
        buyCourse.value = true
    } else {
        cateItem.type = courseData.value.type

        if (courseData.value.type == 3) {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 300
            })
            Object.keys(catalog).map((item) => {
                //@ts-ignore
                catalog[item] = cateItem[item]
            })
            return
        }
        goPage(
            `/pages/study_course/index?course_id=${courseData.value.id}&cate_id=${cateItem.id}&type=${cateItem.type}`
        )
    }
}

//收藏
const handleCollection = async (): Promise<void> => {
    if (!isLogin.value) return goPage('/pages/login/login')
    await apiCourseCollection({ id: courseId.value })
    initGoodaDetail()
}

//加入课程
const handleAddCourse = async (): Promise<void> => {
    if (!isLogin.value) return goPage('/pages/login/login')
    try {
        await apiCourseStudy({ courseId: courseId.value })
        addCourse.value = true
        buyCourse.value = false
        initGoodaDetail()
    } catch (err) {
        //TODO handle the exception
        console.log('加入课程=>', err)
    }
}
//处理下单
const handleOrder = async (): Promise<void> => {
    const client = getClient()
    const data: any = {
        orderExpireTime: '',
        totalAmount: '',
        id: '',
        type: ''
    }
    try {
        const orderData = await apiPlaceOrder({
            courseId: courseId.value,
            orderTerminal: client
        })
        for (const key in data) {
            data[key] = orderData[key]
        }
        data.type = PayEnum.ORDER //下单
        data.courseId = courseId.value
        goPage(`/pages/order_buy/index?orderData=${encodeURIComponent(JSON.stringify(data))}`)
    } catch (err) {
        //TODO handle the exception
        throw new Error(err + '订单下单报错')
    }
}

//去学习
const goStudyCourse = () => {
    const course = courseData.value
    if (course.courseCatalogues.length == 0) {
        uni.showToast({ title: '该课程无目录', icon: 'error' })
        return
    }
    goPage(
        `/pages/study_course/index?course_id=${course.id}&cate_id=${course.courseCatalogues[0]?.id}&type=${course.type}`
    )
}

//跳转页面方法
const goPage = (url: string) => {
    uni.navigateTo({
        url: url
    })
}
//返回首页
const goHome = () => {
    uni.navigateTo({ url: '/pages/index/index' })
}
/** Methods End **/

/** Life Cycle Start **/
onLoad(async (options) => {
    courseId.value = options?.id || 0
})

onShow(async () => {
    buyCourse.value = false
    await initGoodaDetail()
    await getEvaluate()
    await getMeterial()
    await getCouponList()
})
/** Life Cycle End **/
</script>

<style lang="scss" scoped>
.btn {
    color: #333;
    text-align: center;
    border: none;
    border-radius: 0;
    background-color: transparent;

    .share {
        image {
            width: 34rpx;
            height: 34rpx;
        }

        width: 70rpx;
    }
}

.btn::after {
    border: none;
}

.course {
    padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

    // 课程信息
    .course-info {
        padding: 24rpx;
        padding-top: 30rpx;

        .tags {
            padding: 2px 13rpx;
            border-radius: 6rpx;
            // color: $color-primary;
            font-size: 24rpx;
            // background-color: rgba($color-primary, 0.2);
        }
    }
    //优惠券
    .coupon {
        .tick {
            -webkit-mask-image: radial-gradient(circle at 5rpx 50%, transparent 5rpx, red 5.5rpx);
            -webkit-mask-position: -5rpx;
        }
    }

    // 讲师信息
    .teacher-info {
        padding: 30rpx;
        margin-top: 24rpx;
        &--synopsis {
            width: 550rpx;
        }
    }

    // 课件资料
    .course-materials {
        &--info {
            padding: 20rpx 20rpx;
            border: 1px solid #e2e2e2;
            image {
                width: 54rpx;
                height: 46rpx;
            }

            &--name {
                width: 500rpx;
                color: $color-text-deep;
                font-size: $font-size-lg;
            }
        }
    }

    // 课程详情
    .course_detail {
        margin-top: 24rpx;
        background-color: #ffffff;
    }
}

// 底部按钮
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    box-shadow: 2rpx 2rpx 22rpx rgba($color: #000000, $alpha: 0.1);
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

    &--item {
        width: 94rpx;
        display: inline-block;

        image {
            width: 38rpx;
            height: 38rpx;
        }

        color: $color-text-light;
        font-size: $font-size-xs;
    }
}

// 服务下架或不存在时
.empty {
    padding-top: 200rpx;

    .empty-bottom {
        width: 90vw;
        margin-top: 130rpx;
    }
}

// 下载课件弹窗
.download-container {
    width: 640rpx;

    .download-header {
        height: 400rpx;
        text-align: center;
        border-radius: 14rpx 14rpx 0 0;
        background-color: $color-primary;

        image {
            width: 177rpx;
            height: 140rpx;
        }
    }

    .download-main {
        height: 413rpx;
        padding: 0 50rpx;
        position: relative;
        font-size: $font-size-md;
        border-radius: 0 0 14rpx 14rpx;

        &--link {
            text {
                white-space: nowrap;
            }

            view {
                width: 460rpx;
                word-break: break-all;
                word-break: break-word;
            }
        }

        .copy-btn {
            width: 540rpx;
            bottom: 30rpx;
            padding: 0 40rpx;
            position: absolute;
        }
    }
}

// 通用弹窗
.course-pop {
    width: 640rpx;
    padding: 70rpx 80rpx 40rpx 80rpx;
}

.muted {
    color: #999;
}
</style>
